<!--
 * @Author: wangding
 * @Date: 2020-11-11 15:58:31
 * @LastEditTime: 2021-01-25 19:17:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\sale\add.vue
-->
<template>
    <div class="buyPage-main-box-add">
        <el-dialog
        :title="$t('add')"
        :visible="newVisible"
        width="40%"
        @close="()=>{$store.commit('setNewVisible',false)}"
        :close-on-click-modal='false'
        >
            <el-row :gutter="20">
                <el-col :span="17" :offset="2">
                    <el-form ref="form" :model="form" label-width="200px" >
                        <el-form-item :label="$t('test.test_house_type')" prop="houseType" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.houseType" filterable :placeholder="$t('please_choose')" clearable @change='typeChange' style="width:100%;">
                                <el-option
                                    v-for="item in dictCodes"
                                    :key="item.value"
                                    :label="item.code"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if='form.houseType' :label="$t('test.test_house_name')" prop="houseId" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.houseId" filterable :placeholder="$t('please_choose')" clearable style="width:100%;" @change='houseIdChange'>
                                <el-option
                                    v-for="item in houseTypeList"
                                    :key="item.sid"
                                    :label="item.houseName"
                                    :value="item.sid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if='form.houseType === "0"' :label="$t('test.test_house_column')" prop="houseFiled" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.houseFiled" filterable :placeholder="$t('please_choose')" clearable style="width:100%;">
                                <el-option
                                    v-for="item in filedName"
                                    :key="item.filedName"
                                    :label="item.filedName"
                                    :value="item.filedName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('devWifi.wifiSN')" prop="wifiSN" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.wifiSN" :placeholder="$t('pleaseInput')"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setNewVisible',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('sure')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        addname:{
            type:String,
            default:''
        },
        dictCodes:{
            type:Array,
            default:''
        }
    },
    data() {
        return {
            form:{
                wifiSN:"",
                houseType:'',
                houseId:'',
                houseFiled:'',
            },
            flag:false,
            serviceList:[],
            houseTypeList:[],
            
            filedName:[]
        };
    },
    computed: {
        newVisible(){
            return this.$store.state.sysStore.newVisible
        }
    },
    watch: {
    },
    created() {

    },
    mounted() {
        
        this.testHouseGetAllHouse()
    },
    methods: {
        async testHouseGetNotUseFiled(){
            let res = await this.API.testHouseGetNotUseFiled({
                houseId:this.form.houseId
            })
            this.filedName = res
        },
        async testHouseGetAllHouse(){
            let res = await this.API.testHouseGetAllHouse({
                houseType:this.form.houseType
            })
            this.houseTypeList = res
        },
        typeChange(){
            this.testHouseGetAllHouse()
        },
        houseIdChange(){
             this.testHouseGetNotUseFiled()
        },
        async deviceTestIsUniqSn(){
            let res = await this.API.deviceTestIsUniqSn({
                wifiSN:this.form.wifiSN
            })
            if(res){
                this.deviceTestExistSalerIdBywifnSN()
            }
        },
        async deviceTestExistSalerIdBywifnSN(){
            let res = await this.API.deviceTestExistSalerIdBywifnSN({
                wifiSN:this.form.wifiSN
            })
            if(!res){
                this.deviceTestExistSN()
            }
        },
        async deviceTestExistSN(){
            let res = await this.API.deviceTestExistSN({
                wifiSN:this.form.wifiSN
            })
            if(res){
                this.deviceTestAdd()
            }
        },
        async deviceTestAdd(){
            let res = await this.API.deviceTestAdd({
                wifiSN:this.form.wifiSN,
                houseFiled:this.form.houseFiled || '',
                houseType:this.form.houseType,
                houseId:this.form.houseId,
            })
            if(this.comm.showMsg(res.success)){
                this.$store.commit('setNewVisible',false)
                this.$emit('uploadData',true)
            }
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.deviceTestIsUniqSn()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
    },
};
</script>

<style  lang="less" >
.buyPage-main-box-add{
    .el-form-item__content{
        display: flex;
    }
    .icon-fontsize{
        font-size: 25px;
        margin-left: 10px;
        display: block;
        width: 25px;
        height: 33px;
    }
}
</style>
